import { View, Image, Video } from "@tarojs/components";
import useInitAction from "@/hooks/useInitAction";
import {  Uploader } from "@antmjs/vantui";
import useUpladVideoAction from "@/hooks/useUpladVideoAction";

import uploadIcon from '@/assets/images/upload-icon.png'
import Taro from "@tarojs/taro";
import { RESPONSE_CODE, STORE_KEY } from "@/common/config";
import { Suspense, useEffect, useState } from "react";
import { API_URL } from "@/common/serviveApi";
import { IUserProfileEditPromise, USER_PROFILE_STATUS } from "@/typing";
import useProfileInfoAction from "@/hooks/useProfileInfoAction";
import { handleInitStoreBaseInfo, showToast } from "@/common/util";

import playIcon from '@/assets/images/play.png'

import './editVideo.scss'
import PendingPop from "@/components/pendingPop/pendingPop";
const EditVideo: React.FC = () => {

    const { handleShopUserprofileEdit } = useProfileInfoAction()
    const [pendingPopShow, setPendingPopShow] = useState(false)


    // const[hasEditVideo,setHasEditVideo] = useState(false)
    const { bottomSafeHeight } = useInitAction()
    const { videoPoster,
        hasEditVideo,
        videoUrl,
        playStatus, setPlayStatus,
        handleDeleteVideo,
        handleAfterUploadVideo,
        handleBeforeUploadVideo,
        setVideoUrl
    } = useUpladVideoAction();
    const handleInitVideo = () => {
        const storeVideoUrl = Taro.getStorageSync(STORE_KEY.VIDEO_URL)
        if (storeVideoUrl) {
            setVideoUrl(storeVideoUrl)
        }
    }
    const handleSaveVideo = async () => {
        if (hasEditVideo) {
            Taro.showModal({
                title: '提示',
                content: '确定修改视频吗？',
                success: async function (res) {
                    if (res.confirm) {
                        const editRes = await handleShopUserprofileEdit({ media_video: videoUrl }) as IUserProfileEditPromise
                        Taro.hideLoading({

                        })
                        const { msg, code,data } = editRes
                        showToast(msg)
                        if (code === RESPONSE_CODE.SUCCESS) {
                            const storeBaseUserInfo = handleInitStoreBaseInfo()
                            storeBaseUserInfo['modify_field']['media_video'] = USER_PROFILE_STATUS.disable
                            Taro.setStorageSync(STORE_KEY.BASE_USER_INFO, JSON.stringify(storeBaseUserInfo))
                            if(data.status ===USER_PROFILE_STATUS.pending ){
                                setPendingPopShow(true)
                            }else{
                                Taro.navigateBack()
                            }
                            // Taro.navigateBack()
                            // setPendingPopShow(true)
                        }
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        } else {
            Taro.navigateBack()
        }



    }
    const handleCallBack = () => {
         setPendingPopShow(false)
            Taro.navigateBack()
    }
    useEffect(() => {

        handleInitVideo()

    }, []);

    return <>
        <View className="bg-#F6F6F6 box-border w-full min-h-100vh pt-36px flex flex-col items-center" style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '50rpx' }}>
            <View className="w-full box-border pl-46px pr-44px text-#161618 text-28px leading-40px">请上传3分钟以内的视频，须有本人出镜及声音，可以是自我介绍或话题推荐类内容。</View>

            <Uploader accept="video" compressed maxCount={1} onAfterRead={handleAfterUploadVideo} useBeforeRead onBeforeRead={handleBeforeUploadVideo} >
                <View className="w-366px box-border bg-#fff flex flex-col items-center justify-center h-320px mt-48px mx-auto">
                    <Image src={uploadIcon} className="w-58px h-60px" />
                    <View className="mt-18px text-#666666 text-28px">从相册上传视频</View>
                </View>
            </Uploader>
            {videoUrl && <>
                <View className="w-364px h-544px relative mt-48px">
                    <Video
                        id='video'
                        className="w-364px h-544px relative "
                        onTap={() => setPlayStatus(!playStatus)}
                        src={`${API_URL}${videoUrl}`}
                        poster={videoPoster}
                        initialTime={0}

                        autoplay={false}
                        loop={false}
                        muted={false}
                        onEnded={() => setPlayStatus(false)}
                    >
                        {!playStatus && <View className='video-controls'>
                            <Image className='w-84px h-84px' src={playIcon} />
                        </View>}

                    </Video>
                    <View className="w-98px h-46px flex items-center justify-center bg-#1F1F1F text-#fff text-24px absolute bottom-0 right-0" onClick={handleDeleteVideo}>删除</View>
                </View>
                <View className="mt-78px w-592px h-92px flex mx-auto items-center justify-center text-#fff text-30px font-medium bg-#8232E8" onClick={handleSaveVideo}>保存</View>
            </>
            }



        </View>
         <Suspense>
            <PendingPop show={pendingPopShow} disableText='视频' callBack={handleCallBack}></PendingPop>
        </Suspense>
       
    </>
}
export default EditVideo;